<template>
    <div class="login-box">
        <div class="login-form">
            <h1>Vite4-Vue3-Typescript-Template</h1>
            <el-form
                ref="ruleFormRef"
                class="login-info"
                :model="userInfo"
                :rules="rules"
                show-message
                center
            >
                <el-form-item prop="username">
                    <el-input
                        v-model="userInfo.username"
                        :prefix-icon="User"
                        placeholder="账号"
                    />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        v-model="userInfo.password"
                        :prefix-icon="Lock"
                        type="password"
                        placeholder="密码"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button
                        type="primary"
                        style="width: 100%"
                        @click="userLogin"
                        >登录</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <img class="login-img" :src="toSVGDataUrl(loginIcon)" />
    </div>
</template>
<!-- v-debounce:500="userLogin" -->
<script lang="ts" setup>
import { reactive } from "vue";
import { useRouter } from "vue-router";
import { User, Lock } from "@element-plus/icons-vue";
import type { FormRules } from "element-plus";
import { useUserStoreHook } from "@/store/user";
import loginIcon from "@/assets/imgs/temp.svg?raw";
import vDebounce from "@/directive/debounce";
import { debounce } from "@/utils";

const router = useRouter();
const userStore = useUserStoreHook();

const toSVGDataUrl = (str: string) => {
    const base64 = btoa(str);
    return `data:image/svg+xml;base64,${base64}`;
};

const userInfo = reactive({
    username: "dawei",
    password: "dawei",
});
const rules = reactive<FormRules>({
    username: [
        {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
        },
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: "blur",
        },
    ],
});
function userLogin() {
    userStore.storeUserLogin(userInfo).then(() => {
        router.push("/");
    });
}
</script>

<style lang="less" scoped>
.login-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    background: var(--dawei-backgroud-color);

    .login-form {
        display: flex;
        width: 300px;
        text-align: center;
        flex-direction: column;

        .login-info {
            height: max-content;
        }
    }
}

.login-img {
    width: 500px;
    height: 400px;
}

@media screen and (width <= 900px) {
    .login-img {
        display: none;
    }
}
</style>
